{* $Id$ *}
{include_core file="admin/lib/header.html" title="素材管理"}
<div class="page-header border-bottom clearfix">
  <h2 class="left">素材管理<span>{if $info}编辑{else}添加{/if}素材</span></h2>
  <a href="{AnUrl('material/admin')}" class="btn btn-default btn-sm right">&lt;&nbsp;返回素材列表</a>
</div>
<div class="add-form">
  <form class="js_creatForm" action="{AnUrl('material/admin/save')}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" value="{$info.id}">
    <table class="table" cellpadding="0" cellspacing="0">
      <tr>
        <th><label for="" class="add-f-label">素材名：</label></th>
        <td>
          <input name="info[title]" style="width:490px;" value="{$info.title}" type="text" class="add-f-ipt1 js_title">
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>素材名会显示在相应内容的标题位置，最多输入 <span style="color:red;">30</span> 字，还可输入 <span class="js_titleNum" style="color:red;">30</span> 字</div>
        </td>
      </tr>
      <tr class='js_location'>
        <th><label for="" class="add-f-label">播放地址：</label></th>
        <td>
        {$province_list = material_helper::get_province(0, 1)}{* 省列表 *}
          <select class="add-f-slt1 js_province" name="info[province]">
            <option value="0" code='0'>全国</option>
            {foreach $province_list as $k=>$v}
                <option value="{$v.area}" {if $info.province == $v.area}selected{/if} code="{$v.id}">{$v.area}</option>
            {/foreach}
          </select>
          <select class="add-f-slt1 js_city" name="info[city]">
            <option value="0">全国</option>
          </select>
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>素材播放的地址</div>
        </td>
      </tr>
      <tr class='js_stop_time'>
        <th><label for="" class="add-f-label">停留时长：</label></th>
        <td>
          <input name="info[stop_time]" style="width:490px;" value="{$info.stop_time}" type="text" class="add-f-ipt1 js_time">
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>停留多长时间切换到下一张图片，单位（秒）如果是视频，将以视频的时长为主</div>
        </td>
      </tr>
      <tr class="js_type_img">
        <th valign="top"><label for="" class="add-f-label">上传素材：</label></th>
        <td class="perUpOuter">
          <div class="clearfix js_img_up" >
            <div class="btn-upload left">
              <input id='img_uploadify' type="file">
            </div>
            <span class="tips left" id='queue'></span>
          </div>
          <div class="js_upFileBox">
            {if $info.type == 1}
              <img src='{_image("{$info.path}", "small")}' />
            {else}
              <span>{$info.path}</span>
            {/if}
          </div>
          <input class='js_file' type="hidden" name='info[path]' value="{$info.path}">
        </td>
      </tr>
      <tr><th>&nbsp;</th><td class="noborder"><button type="submit" class="btn btn-success js_submit">&nbsp;&nbsp;&nbsp;确认&nbsp;&nbsp;&nbsp;</button></td></tr>
    </table>
  </form>
</div>

{load_js file="uploadify/jquery.uploadify.min.js"}
<script>

var filePath = [];
/*
var check = true;
{if $info.id}
  check = false;
  $('.js_path').val(filePath[0]);
{/if}
*/
function setNum(thisClass, maxNum) {
  var presentNum = getFontNum($('.'+thisClass).val());
  var remainNum  = maxNum - presentNum;
  $('.'+thisClass+'Num').text(remainNum);
}
$(function(){
  // 初始化剩余字数
  setNum('js_title', 30);
  //setNum('js_intro', 200);
  $('.js_title').keyup(function(){
    setNum('js_title', 30);
  });

  // 城市联动
  $('.js_province').change(function(){
    var thisObj = $(this);
    var code = thisObj.find('option:selected').attr('code');
    if (code == 0) {
        $('.js_city').html('<option value="0">全国</option>');
        return ;
    }
    //发送ajax
    $.ajax({
      url : 'material/admin/get_city?code='+code,
      success : function(city_list){
        var html = '<option value="0">请选择市</option>';
        for (var i in city_list) {
          html += '<option value="'+city_list[i]['area']+'">'+city_list[i]['area']+'</option>';
        //var opt = $('<option value="'+city_list[i]['area']+'">'+city_list[i]['area']+'</option>');
          $('.js_city').html(html);
        }
      },
      type : 'get',
      dataType : 'json',
      async : false,
    });
  });

// 上传图片
$('#img_uploadify').uploadify({
    'swf'        : siteUrl+'/js/uploadify/uploadify.swf',
    'uploader'   : '{AnUrl("core/handler/file_uploader/uploadify")}',
    'buttonImage' : siteUrl+'/images/admin/btn-updimg.png', //按钮图
    'fileTypeExts' : '*.jpg;*.png;*.jpeg;*.gif;*.mp4;',
    'height'   : 27,   //按钮高度
    'width' : 74,     //宽
    'queueID'    : 'queue',
    'buttonText' : '',
    'onUploadSuccess':function(error, content) {
        // addSpace();
        var file = JSON.parse(content);
        if (file.info != 'ok') {
            showMsg(file.info);return false;
        }
        $('.js_file').val(file.file_path);

        var Path = file.file_path;

        arr = Path.split('.');
        var type = arr[arr.length - 1];

        if (type == 'mp4') {
            $('.js_upFileBox').html('<span>'+ Path +' </span>');
        } else {
            $('.js_upFileBox').html('<img src='+ file.small +' />');
        }
    },
    'onError' : function (event, ID, fileObj, errorObj) {
    }
});

  // 提交验证
  $('.js_submit').click(function(){
    var title = $('.js_title').val();               // 标题
    var stop_time = $.trim($('.js_time').val());    // 停留时间
    var path = $('.js_file').val();

    if (!title) {
        showMsg('请输入素材名');
        return false;
    }
    if (title.length > 30) {
        showMsg('您输入的素材名过长');
        return false;
    }
    if (stop_time == '') {
        showMsg('请输入停留时间');
        return false;
    }
    if (isNaN(stop_time)) {
        showMsg('请输入正确停留时间');
        return false;
    }
    if (!path) {
        showMsg('请上传素材');return false;
    }
  });
});
</script>
{include_core file="admin/lib/footer.html"}